<template>
	<div class="main-1" :class="isTransparent ? 'on' : ''" :style="'padding-top: ' + statusBarHeight + 'px;'">
		<div class="warp">
			<div class="back" v-if="!mode || mode === 'normal'" @click="goBack">
				<image v-show="isTransparent" class="back_img" src="../static/icon/back2.png" alt="">
				<image v-show="!isTransparent" class="back_img" src="../static/icons/back.png" alt="">	
			</div>
			<div class="left-icon" v-if="mode === 'leftIcon'" @click.stop="handlerLeftClick">
				
				<image
					:src="leftIcon"
					:class="{
						point: isLeftIconPoint
					}"
				/>
			</div>
			<div class="left-text" :class="active ? 'in' : ''" v-if="mode === 'leftText'" @click.stop="handlerLeftClick">
				{{leftText}}
			</div>
			<slot name="picker"></slot>
			<div class="title" v-if="!middleTag || middleTag === 'normal'" :class="active ? 'in' : ''">{{ title }}</div>
			<div class="right-icon">
				<slot name="right-cl"></slot>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			
			projectPickerValue: 0,
		};
	},
	props: {
		title: String,
		mode: String,
		leftText: String,
		rightType: {
			type: String,
			default: () => {
				return '';
			}
		},
		rightIcon: {
			type: String,
			default: () => {
				return '';
			}
		},
		isTransparent: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		active: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		iconStyle: {
			type: String,
			default: () => {
				return '';
			}
		},
		//写法一
		leftIcon: String,
		//写法二
		// leftIcon: {
		// 	type: String,
		// 	default: () => {
		// 		return '';
		// 	}
		// },
		leftIconStyle: {
			type: String,
			default: () => {
				return '';
			}
		},
		isLeftIconPoint: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		middleTag: {
			type: String,
			default: () => {
				return '';
			}
		},
		projectRange: {
			type: Array,
			default: () => {
				return [];
			}
		},
		projectRangeKey: {
			type: String,
			default: () => {
				return '';
			}
		},
		currentProject:String,
	
	},
	mounted() {
	},
	methods: {
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		handlerClick() {
			this.$emit('rightClick', 1);
		},
		handlerLeftClick() {
			this.$emit('leftClick', 1)
		}
	},
	computed: {
		...mapState(['statusBarHeight','projectInfo'])
	}
};
</script>

<style scoped lang="scss">


.main-1 {
	width: 100%;
	background: #FFFFFF;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	.warp {
		width: 100%;
		height: 44px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		font-size: 0;
		.title {
			font-size: 16px;
			color: #000;
			font-weight: bold;
			line-height: 1;
		}
		.title-picker {
			font-size: 0;
			.warp {
				display: flex;
				align-items: center;
				justify-content: center;
				.txt {
					font-size: 16px;
					color: #000;
					font-weight: bold;
					line-height: 1;
					margin-right: 10upx;
				}
				image {
					width: 28upx;
					height: 16upx;
				}
			}
		}
		.back {
			position: absolute;
			left: 0upx;
			font-size: 14px;
			line-height: 1;
			color: #999;
			z-index: 6;
			.back_img{
				width: 40rpx;
				height: 40rpx;
				padding: 0 0 0 40upx;
				
			}
		}
		.left-icon {
			position: absolute;
			left: 20upx;
			font-size: 0;
			z-index: 6;
			width: 48upx;
			height: 48upx;
			// padding-left: 10upx;
			image {
				width: 100%;
				height: 100%;
			}
			.point {
				&:after {
					content: '';
					position: absolute;
					right: -6upx;
					top: -6upx;
					width: 12upx;
					height: 12upx;
					border-radius: 50%;
					background: #ff0000;
				}
			}
		}
		.left-text{
			font-size: 32upx;
			line-height: 44px;
			color: #000000;
			position: absolute;
			left: 0;
			padding-left: 30upx;
		}
		
		.right-icon {
			position: absolute;
			right: 20upx;
			top: 50%;
			// width: 36upx;
			// height: 36upx;
			font-size: 0;
			margin-top: -18upx;
			// image {
			// 	width: 100%;
			// 	height: 100%;
			// }
		}
	}
}
.on {
	border-bottom: none;
	background: transparent;
	.title {
		color: #fff !important;
	}
	.back {
		color: #fff !important;
	}
	.select-project {
		.warp {
			.project {
				color: #fff !important;
			}
		}
	}
}
.in{
	color: #fff !important;
}
</style>
